<html>
<head>
<link rel="stylesheet" type="text/css" href="css/LanguagePickerDiv.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/LanguagePicker.js"></script>
<script type="text/javascript">
	jQuery(function(){languagePicker.jsonRoot = "js/";})
</script>
<title>Language Picker</title>
</head>
<body>

<h1>Language Picker</h1>

<form method="GET">
<div class="languagePickerArea">

<div class="languagePickerCountryColumn">
<select id="region" class="languagePickerRegion" onchange="window.languagePicker.autoLoadCountries('#region', '#country');">
<option value="">Select a Region and Country</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="Pacific">Pacific</option>
</select>

<select id="country" class="languagePickerCountry" size="11" onchange="languagePicker.autoLoadLanguages('#country', '#language', {type:[languagePicker.LANGUAGE]});">
</select>
</div>

<div class="languagePickerLanguageColumn">
<b>Select Language(s):</b>
<select id="language" class="languagePickerLanguage" multiple="multiple" size="11">
</select>
</div>

<div class="languagePickerButtonColumn">
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;

<input class="languagePickerAddButton" type="button" value="&rarr;" onclick="languagePicker.copySelectedTo('#language', '#selectedLanguages', '#languagePickerHiddenInputs', 'language', {countrySelect:'#country', appendCountryCode:true, showCountry:true, showCode:true});">
<input class="languagePickerRemoveButton" type="button" value="&larr;" onclick="languagePicker.removeSelectedFrom('#selectedLanguages', '#languagePickerHiddenInputs', 'language');">

<input class="languagePickerRemoveButton" type="button" value="&uarr;" onclick="languagePicker.moveSelectedUp('#selectedLanguages', '#languagePickerHiddenInputs', 'language');">
<input class="languagePickerRemoveButton" type="button" value="&darr;" onclick="languagePicker.moveSelectedDown('#selectedLanguages', '#languagePickerHiddenInputs', 'language');">

<input class="languagePickerRemoveButton" type="button" value="?" onclick="languagePicker.openEthnologue('#language');">
<input class="languagePickerRemoveButton" type="button" value="&#8916;" onclick="languagePicker.openEthnologueFamily('#language');">
</div>

<div class="languagePickerSelectedLanguageColumn">
<b>Selected Languages</b>
<select id="selectedLanguages" class="languagePickerSelectedLanguage" multiple="multiple" size="11">
</select>
<div id="languagePickerHiddenInputs" class="languagePickerHiddenInputs">
</div>
</div>
</div>

<input style="display: block;" type="submit" name="submit" value="Submit" />

</form>


</body>
</html>